<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="'View '+${category.name}">$Title$</title>
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="../css/aboveTool.css" type="text/css" media="screen"/>
    <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<body>
<div th:replace="common/IncludeTop::header"></div>
    <div id="Content">

        <div id="BackLink">
            <a href="viewMain">Return to Main Menu</a>
        </div>
        <br>
        <div id="Catalog">
            <div>
                <script type="text/javascript">
                    $(document).ready(function(){
                        $("#Catalog").hide().fadeIn();
                    });
                </script>
            </div>
            <h2 th:text="${category.name}">${sessionScope.category.name}</h2>
            <table>
                <tr>
                    <th>Product ID</th>
                    <th>Name</th>
                </tr>
                <tr th:each="product:${productList}">
                    <td><a th:href="@{viewProduct(productId=${product.productId})}" th:text="${product.productId}">${product.productId}</a></td>
                    <td th:text="${product.name}">${product.name}</td>
                </tr>
            </table>
        </div>
    </div>
<div th:replace="common/IncludeBottom::footer"></div>
</body>
</html>